<template>
    <div id="app">
        <div class="heador">
          <h2>我的拖拽表单</h2>
          <div>
              <el-button>导入JSON</el-button>
              <el-button>清空</el-button>
              <el-button>预览</el-button>
              <el-button>生成JSON</el-button>
              <el-button>生成代码</el-button>
          </div>
        </div>
        <div class="container">
            <div class="l-container">
              <h3>基础字段</h3>
                <draggable
                    v-model="list1"
                    draggable=".c-item"
                    tag="ul"
                    v-bind="dragOptions"
                    :options="{
                        sort: false,
                        group: { name: 'field', pull: 'clone', put: false },
                    }"
                >
                    <li class="item c-item" v-for="(d,index) in list1" :key="index">
                        <i :class="d.icon"></i>
                        <p>{{ d.name }}</p>
                    </li>
                </draggable>
            </div>
            <div class="c-container">
                <div v-if="widgetForm.list.length == 0" class="form-empty">请拖入左边的组件</div>
                {{widgetForm.list}}
                <draggable
                    group="field"
                    :list="widgetForm.list"
                    v-bind="dragOptions"
                    @change="toChange"
                    style="border: 1px solid #ccc; height: 100%"
                    @add="handleWidgetAdd"

                >
                    <div @click="handleSelectWidget(index)"   v-for="(d, index) in widgetForm.list" :key="index" class="item">
                        <template  v-if="d.type === 'input'">
                            <el-input
                                v-model="d.defaultValue"
                                placeholder="请输入内容"
                                :disabled="d.disabled"
                            ></el-input>
                        </template>
                        <template v-if="d.type === 'button'">
                            <el-button
                                :type="d.btnType"
                                :disabled="d.disabled"
                                >{{ d.defaultValue }}</el-button
                            >
                        </template>
                        <template v-if="d.type === 'rate'">
                            <el-rate v-model="d.defaultValue"></el-rate>
                        </template>
                        <template v-if="d.type === 'select'">
                            <el-select
                                v-model="d.defaultValue"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in d.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </template>
                        <template v-if="d.type === 'cascader'">
                            <el-carousel
                                height="300px"
                                :indicator-position="d.options.dotPos"
                            >
                                <el-carousel-item
                                    v-for="item in d.defaultValue"
                                    :key="item.url"
                                >
                                    <img
                                        style="width: 100%; height: 100%"
                                        :src="item.url"
                                        alt=""
                                        srcset=""
                                    />
                                </el-carousel-item>
                            </el-carousel>
                        </template>
                    </div>
                </draggable>
            </div>
            <div class="r-container">
                <!-- {{ list1 }}
      <br />
      {{ list2 }} -->
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!--       {{ list2 }} -->
                    <el-tab-pane label="页面样式" name="first"
                        ><!-- 页面样式 --></el-tab-pane
                    >
                    <el-tab-pane label="组件配置" name="second">
                        <el-form ref="form" :model="form" label-width="120px">
                            <el-form-item label="组件名称：">
                                <el-input
                                    v-model="nowComponent.defaultName"
                                    :disabled="nowComponent.disabled"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="是否可修改：">
                                <el-switch
                                    v-model="nowComponent.disabled"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                >
                                </el-switch>
                            </el-form-item>
                            <el-form-item
                                label="按钮类型"
                                v-if="nowComponent.type === 'button'"
                            >
                                <el-radio-group v-model="nowComponent.btnType">
                                    <el-radio-button label="primary"
                                        >主要按钮</el-radio-button
                                    >
                                    <el-radio-button label="success"
                                        >成功按钮</el-radio-button
                                    >
                                    <el-radio-button label="info"
                                        >信息按钮</el-radio-button
                                    >
                                    <el-radio-button label="warning"
                                        >警告按钮</el-radio-button
                                    >
                                    <el-radio-button label="danger"
                                        >危险按钮</el-radio-button
                                    >
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item
                                label="轮播图片链接"
                                v-if="nowComponent.type === 'cascader'"
                            >
                                <div
                                    v-for="(
                                        item, index
                                    ) in nowComponent.defaultValue"
                                    :key="index"
                                >
                                    value{{ index }}:
                                    <el-input v-model="item.url" />
                                    <el-button @click="deleteItem(index)"
                                        >删除</el-button
                                    >
                                </div>
                            </el-form-item>
                            <el-form-item
                                label="指示器位置"
                                v-if="nowComponent.type === 'cascader'"
                            >
                                <el-input
                                    v-model="nowComponent.options.dotPos"
                                />
                            </el-form-item>
                            <el-form-item
                                label="下拉选中的值"
                                v-if="nowComponent.type === 'select'"
                            >
                                <div
                                    v-for="(
                                        item, index
                                    ) in nowComponent.options"
                                    :key="index"
                                >
                                    value{{ index }}:
                                    <el-input v-model="item.label" />
                                    <el-button @click="deleteItem(index)"
                                        >删除</el-button
                                    >
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
import lists from '../config/lists'
export default {
  components: {
    draggable,
  },
  data() {
    return {
      dragOptions: { animation: 500 },
      list1: lists,
      list2: [],
      activeName: 'first',
      nowComponent: {},
      form: {},
      widgetForm: {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: 'right',
          size: 'small'
        },
      },
      widgetFormSelect: null
    }
  },
  computed: {
    nowComponentDetails() {
      return JSON.parse(JSON.stringify(this.nowComponent))
    },
  },
  watch: {},
  methods: {
    hanldeAdd(data) {
      console.log(data, 'item')
      console.log(lists[data.oldIndex], '==============')
      this.activeName = 'second'
      //this.list2.push(lists[data.oldIndex])
      this.nowComponent = lists[data.oldIndex]
    },
    toChange() {},
    handleClick() {},
    deleteItem(index) {
      console.log(index, '4566')
      this.nowComponent.options.splice(index, 1)
    },
    handleSelectWidget (index) {
      console.log(index, '#####')
      this.selectWidget = this.widgetForm.list[index]
    },
    handleWidgetAdd (evt) {
      console.log('add', evt)
      console.log('end', evt)
      const newIndex = evt.newIndex
      const to = evt.to
      console.log(to, 'to')

      //为拖拽到容器的元素添加唯一 key
      const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      this.$set(this.widgetForm.list, newIndex, {
        ...this.widgetForm.list[newIndex],
        options: {
          ...this.widgetForm.list[newIndex].options,
          remoteFunc: 'func_' + key
        },
        key,
        // 绑定键值
        model: this.widgetForm.list[newIndex].type + '_' + key,
        rules: []
      })

      if (this.widgetForm.list[newIndex].type === 'radio' || this.widgetForm.list[newIndex].type === 'checkbox' || this.widgetForm.list[newIndex].type === 'select') {
        this.$set(this.widgetForm.list, newIndex, {
          ...this.widgetForm.list[newIndex],
          options: {
            ...this.widgetForm.list[newIndex].options,
            options: this.widgetForm.list[newIndex].options.options.map(item => ({
              ...item
            }))
          }
        })
      }

      if (this.widgetForm.list[newIndex].type === 'grid') {
        this.$set(this.widgetForm.list, newIndex, {
          ...this.widgetForm.list[newIndex],
          columns: this.widgetForm.list[newIndex].columns.map(item => ({ ...item }))
        })
      }

      this.selectWidget = this.widgetForm.list[newIndex]
    }
  },
}
</script>

<style lang="scss">
.container {
    display: flex;
    height: calc(100% - 65px);
    .l-container {
        flex: 1;
        margin:10px 5px;
        h2{
          margin-bottom: 10px;
        }
        .item {
            border: 1px solid #999;
            width: 50px;
            height: 50px;
            line-height: 50px;
            display: inline-block;
            text-align: center;
            margin:10px 5px;
            font-size: 14px;
            border-radius: 10px;
            cursor: pointer;
        }
    }
    .c-container {
        flex: 1;
        border: 1px solid #0f0;
        height: 100%;
        box-sizing: border-box;
    }
    .r-container {
        flex: 1;
    }
}
.heador{
  height: 60px;
  line-height: 60px;
  background: #ddd;
  padding:0 20px;
  display: flex;
  justify-content: space-between;
}
</style>
